﻿<html>
<head>
    <title>三3三博客社区</title>
    <link rel="icon" href="../../images/icon.jpg" sizes="32x32">
    <meta charset="UTF-8">
    <LINK rel="Bookmark" href="favicon.ico">
    <link rel="icon" href="../../images/icon.jpg" sizes="32x32">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"
          integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <link rel="stylesheet" type="text/css" href="../blog/plugin/h-ui/css/H-ui.min.css"/>
    <link rel="stylesheet" type="text/css" href="../blog/plugin/Hui-iconfont/1.0.8/iconfont.min.css"/>
    <link rel="stylesheet" type="text/css" href="../blog/css/common.css"/>
    <link rel="stylesheet" type="text/css" href="../blog/plugin/pifu/pifu.css"/>
    <link rel="stylesheet" type="text/css" href="../blog/plugin/wangEditor/css/wangEditor.min.css">
    <title>Web sockets test</title>
    <style>
        .div1 {
            width: 1200px;
            height: 800px; /*设置div的大小*/
            /*border:1px solid green;    !*边框*!*/
            overflow: hidden;
            margin: 0 auto;
        }

        .div2 {
            margin: 10px 0;
            /*border-style:dashed;*/
            height: 400px;
            width: 75%;
            margin: 5% auto;
        }

        .div3 {
            margin: auto;
            /*border-style:dashed;*/
            height: 80%;
            width: 75%;
            top: 700px;
        }

        .div4 {
            margin: auto;
            border-style: dashed;
            height: 340px;
            width: 80%;
            top: 480px;
            overflow: auto;
        }

        .div5 {
            margin: auto;
            border-style: dashed;
            height: 340px;
            width: 15%;
            top: 110px;
            float: left;
            position: absolute;
            right: 100px;
        }
    </style>
</head>
<body>

<div class="div5">
    <a class="btn btn-primary" style="background-color: saddlebrown" role="button" data-toggle="collapse"
       href="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
        在线人员列表
    </a>
    <div id="online"></div>
</div>
<div class="div1">
    <a href="../main.html">
        <button onclick="backMain()" style="position: absolute;top: 50px;right: 150px" type="button"
                class="btn btn-primary" data-toggle="button" aria-pressed="false" autocomplete="off">
            返回主页
        </button>
    </a>
    <div class="div2" id="test-editor">
        <div><h3>聊天室</h3></div>
        <div class="div4" id="info"></div>
    </div>
    <!--用于评论-->
    <div class="mt-20 div3" id="ct">
        <div id="err" class="Huialert Huialert-danger hidden radius">成功状态提示</div>
        <textarea id="textarea1" name="comment" style="height:200px;"
                  placeholder="看完不留一发？"> </textarea>
        <div class="text-r mt-10">
            <button onclick="SendData()" class="btn btn-primary radius"> 发送</button>
        </div>
    </div>
</div>


<script type="text/javascript" src="../blog/plugin/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="../blog/plugin/layer/3.0/layer.js"></script>
<script type="text/javascript" src="../blog/plugin/h-ui/js/H-ui.min.js"></script>
<script type="text/javascript" src="../blog/plugin/pifu/pifu.js"></script>
<script type="text/javascript" src="../blog/js/common.js"></script>
<script type="text/javascript" src="../blog/plugin/wangEditor/js/wangEditor.min.js"></script>
<script type="text/javascript">
    var ws;
    var name;
    var testEditor;
    var editor1
    $(function () {
        $.ajaxSettings.async = false;
        $.getJSON("/api/user/findUserInfo", function (data) {
            name = data.name;
        })
        $("img.lazyload").lazyload({failurelimit: 3});
        wangEditor.config.printLog = false;
        editor1 = new wangEditor('textarea1');
        editor1.config.menus = ['insertcode', 'quote', 'bold', '|', 'img', 'emotion', '|', 'undo', 'fullscreen'];
        editor1.config.emotions = {
            'default': {title: '老王表情', data: 'plugin/wangEditor/emotions1.data'},
            'default2': {title: '老王心情', data: 'plugin/wangEditor/emotions3.data'},
            'default3': {title: '顶一顶', data: 'plugin/wangEditor/emotions2.data'}
        };

        wangEditor.config.printLog = false;
        editor1 = new wangEditor('textarea1');
        editor1.config.menus = ['insertcode', 'quote', 'bold', '|', 'img', 'emotion', '|', 'undo', 'fullscreen'];
        editor1.config.emotions = {
            'default': {title: '表情', data: '../blog/plugin/wangEditor/emotions1.data'},
            'default2': {title: '心情', data: '../blog/plugin/wangEditor/emotions3.data'},
            'default3': {title: '顶一顶', data: '../blog/plugin/wangEditor/emotions2.data'}
        };
        editor1.create();

        login();
    });

    function login() {
        if (!ws) {
            try {
                // ws = new WebSocket("ws://59.110.41.12:80/websocket/" + name);//连接服务器
                ws = new WebSocket("wss://www.333blog.top/websocket/" + name);//连接服务器
                ws.onopen = function (event) {
                    console.log("已经与服务器建立了连接...");
                    alert("登陆成功，可以开始聊天了")
                };
                ws.onmessage = function (event) {
                    let d = JSON.parse(event.data);
                    console.log("接收到服务器发送的数据..." + event);
                    if (d.message == 1) {
                        $("#online").empty();
                        document.getElementById("online").innerHTML += d.data;
                    } else if (d.message == 3) {
                        document.getElementById("info").innerHTML += d.data;
                    } else {
                        document.getElementById("info").innerHTML += d.data;
                        let div = document.getElementById("info");
                        div.scrollTop = div.scrollHeight;
                    }
                };
                ws.onclose = function (event) {
                    // let d = "<font color=\"red\" >"+ name + "：退出聊天室。。。</font>";
                    console.log("已经与服务器断开连接...");
                    // document.getElementById("info").innerHTML += d;
                };
                ws.onerror = function (event) {
                    console.log("WebSocket异常！");
                };
            } catch (ex) {
                alert(ex.message);
            }
            // document.getElementById("login").innerHTML = "退出";
        } else {
            ws.close();
            ws = null;
        }
    }


    function SendData() {
        var data = $("#textarea1").val();
        editor1.clear()
        try {
            ws.send(data);
        } catch (ex) {
            alert(ex.message);
        }
    };

    document.onkeydown = function (event) {
        if (event && event.keyCode == 13) { // enter 键
            //输入自己要执行的代码 或者是调用的方法
            SendData()
        }
    }

    function backMain() {
        window.location.href = "../main.html"
    }

</script>
</body>
</html>
